package com.rssreader.client.grids;

import java.util.ArrayList;
import java.util.List;

import com.extjs.gxt.ui.client.Registry;
import com.extjs.gxt.ui.client.data.BasePagingLoader;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.data.PagingLoadConfig;
import com.extjs.gxt.ui.client.data.PagingLoadResult;
import com.extjs.gxt.ui.client.data.PagingLoader;
import com.extjs.gxt.ui.client.data.RpcProxy;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;
import com.extjs.gxt.ui.client.widget.grid.ColumnData;
import com.extjs.gxt.ui.client.widget.grid.ColumnModel;
import com.extjs.gxt.ui.client.widget.grid.Grid;
import com.extjs.gxt.ui.client.widget.grid.GridCellRenderer;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.toolbar.PagingToolBar;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.rssreader.client.RSSReaderConstants;
import com.rssreader.client.services.FeedServiceAsync;
import com.rssreader.shared.model.Item;

public class ItemPagingGrid extends LayoutContainer {
	
	private static final int PAGE_SIZE = 5;
	
	public ItemPagingGrid(){
		setLayout(new FitLayout());
	}
	
	@Override
	protected void onRender(Element parent, int index) {
		super.onRender(parent, index);
		//ColumnConfig可以有很多組，存入list裡，然後傳到ColumnModel的建構式中，生成實體物件
		final List<ColumnConfig> columns = new ArrayList<ColumnConfig>();
		columns.add(new ColumnConfig("title", "Title", 200));
		columns.add(new ColumnConfig("description", "Description", 200));
		columns.add(new ColumnConfig("link", "Link", 200));
		
		GridCellRenderer<ModelData> itemsRenderer = new GridCellRenderer<ModelData>(){
			@Override
			public String render(ModelData model, String property,
					ColumnData config, int rowIndex, int colIndex,
					ListStore<ModelData> store, Grid<ModelData> grid) {
				
				//retrieves the title, description, and link fields from the model
				//and combines them in an HTML string
				String title = model.get("title");
				String description = model.get("description");
				String link = model.get("link");
				return "<b>" + title + "</b><br/>" + description +"<br/>" + link;
			}
		};
		
		//create a new ColumnConfig with the ID of items, and set the renderer to be the itemsRenderere
		ColumnConfig column = new ColumnConfig();
		column.setId("items");
		column.setRenderer(itemsRenderer);
		column.setHeader("Items");
		
		//add the items column to the list of columns
		columns.add(column);
		
		//將定義好的columns傳入ColumnModel的建構式中
		final ColumnModel columnModel = new ColumnModel(columns);
		//example RSS url
		final String TEST_DATA_FILE = "http://englishhome.org/feed";
		final FeedServiceAsync feedService = Registry.get(RSSReaderConstants.FEED_SERVICE);
		
		//create an RpcProxy去調用FeedService的loadItems方法
		RpcProxy<PagingLoadResult<Item>> proxy = new RpcProxy<PagingLoadResult<Item>>(){
			@Override
			// loadConfig是GXT內部自動傳入的
			protected void load(Object loadConfig, AsyncCallback<PagingLoadResult<Item>> callback) {
				feedService.loadItems(TEST_DATA_FILE, (PagingLoadConfig) loadConfig,callback);
			}
		};
		
		// Loader：根據proxy，生成loader，因為返回的類型正好是PagingLoadResult，不需要數據轉換
		PagingLoader<PagingLoadResult<Item>> loader = new BasePagingLoader<PagingLoadResult<Item>>(proxy);
		//透過loader，獲得store數據
		ListStore<ModelData> itemStore = new ListStore<ModelData>(loader);
		
		 // PagingToolBar：定義的時候需要傳入分頁大小 
		final PagingToolBar toolBar = new PagingToolBar(PAGE_SIZE);
		toolBar.bind(loader);
		
		// Grid：定義的時候，需要傳入store和columnModel  
		Grid<ModelData> grid = new Grid<ModelData>(itemStore, columnModel);
		grid.setBorders(true);
		grid.setAutoExpandColumn("items");
		//grid.setAutoExpandColumn("description"); // the description column expands to fill the available space
		
		//此時的load應用了默認的PagingLoadConfig 
		loader.load();
		
		// Grid不直接加入到LayoutContainer，而是Grid添加到ContentPanel，ContentPanel添加到LayoutContainer
		ContentPanel panel = new ContentPanel();
		panel.setLayout(new FitLayout());
		panel.add(grid);
		panel.setHeaderVisible(false);
		panel.setBottomComponent(toolBar);
		add(panel);
	}
}
